<script setup lang="ts">
const show=ref(true);

const menuList=[
  {
    name:'网站首页',
    url:'/'
  },
  {
    name:'关于嘉来',
    url:'/',
    children:[
      {
        name:'公司简介',
        url:'/'
      },
      {
        name:'企业文化',
        url:'/'
      },
      {
        name:'公司荣誉',
        url:'/'
      },
      {
        name:'合作伙伴',
        url:'/'
      }
    ]
  },
  {
    name:'经典案例',
    url:'/',
    children:[
      {
        name:'工程案例',
        url:'/'
      },
      {
        name:'设计案例',
        url:'/'
      },
    ]
  },
  {
    name:'苗圃展示',
    url:'/',
    children:[
      {
        name:'苗圃简介',
        url:'/'
      },
      {
        name:'苗木资源',
        url:'/'
      }
    ]
  },
  {
    name:'嘉来资讯',
    url:'/',
    children:[
      {
        name:'嘉来新闻',
        url:'/'
      },
      {
        name:'嘉来培训',
        url:'/'
      },
      {
        name:'员工风采',
        url:'/'
      }
    ]
  },
  {
    name:'联系我们',
    url:'/',
  },
  {
    name:'员工通道',
    url:'/',
    children:[
      {
        name:'OA',
        url:'/'
      },
      {
        name:'ERP',
        url:'/'
      },
      {
        name:'钉钉',
        url:'/'
      },
      {
        name:'红圈CRM+',
        url:'/'
      },
    ]
  },
  {
    name:'在线留言',
    url:'/',
  }
]
</script>

<template>
  <div class="relative bg-black/60 z-50">
    <div class=" w-8 h-6 relative z-99" @click="show=!show">
      <div
          class="absolute top-0 w-full h-0.5 bg-red-500 transition-all duration-500"
          :class="show?' -rotate-45 origin-right':''"
      ></div>
      <div
          class="absolute top-1/2 w-full h-0.5 bg-red-500"
          :class="show?' opacity-0':''"
      ></div>
      <div
          class="absolute bottom-0 w-full h-0.5 bg-red-500 transition-all duration-500"
          :class="show?' rotate-45 origin-right':''"
      ></div>
    </div>
  </div>



  <div class="fixed inset-0 w-full h-full bg-[url(~/assets/img/nav_bj.jpg)] bg-center bg-no-repeat bg-cover z-5 transition-transform duration-500 ease-in-out"
       :class="show?'translate-y-0':'-translate-y-full'"
  >
    <div class="container">
      <div class="flex flex-wrap">
        <!--左侧菜单-->
        <div class="bg-white w-2xs h-screen pt-10 relative">
          <ul class="cursor-pointer">
            <li class="px-8 group relative" v-for="(item,index) in menuList" :key="index">
              <div class="text-base leading-14 group-hover:text-green-600 border-b border-gray-300">{{ item.name }}</div>
              <div class="absolute left-full top-0 hidden group-hover:block bg-gray-200 shadow-md min-w-[200px] py-2 z-10" v-if="item.children?.length>0">
                <div class="flex flex-col">
                  <a class="text-sm leading-12 text-center hover:text-green-600 " v-for="citem in item.children">
                    {{ citem.name }}
                  </a>
                </div>

              </div>
            </li>
          </ul>
        </div>
        <!--右侧表单-->
        <div class="pt-10 flex-1 flex items-center justify-center h-screen">
          <div class="p-6">
            <h3 class="text-base text-white mb-6">当您有问题可以给我们留言</h3>
            <form>
              <div class="text-white grid grid-cols-4 gap-10">
                <div class="col-span-2">
                  <input type="text" placeholder="姓名"/>
                </div>
                <div class="col-span-2">
                  <input type="text" placeholder="电话"/>
                </div>
                <div class="col-span-2">
                  <input type="text" placeholder="微信"/>
                </div>
                <div class="col-span-2">
                  <input type="text" placeholder="邮箱"/>
                </div>
                <div class="col-span-4">
                  <textarea class="w-full" placeholder="留言内容"></textarea>
                </div>
                <div class="col-span-4">
                  <button class="">提交</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>

</style>